@import "maxin/reset.less";
@import "maxin/lessHat";
@import "maxin/lessAnimation";

.nav{
  height:60px;
  line-height:60px;
  background:rgba(255, 255, 255,.9);
  position: fixed;
  z-index: 999;
  top:0;
  left:0;
  width:100%;
  box-shadow:1px 0 1px #555;
  .nav-a{
    width:1200px;
    margin:0 auto;
    color:#999;
    font-size:16px;
    a{
      padding:0 25px;
      color:#999;
      &:hover{
        color:#00a1cb;
      }
      &.cur{
        color:#00a1cb;
      }
    }
  }
}
.header{
  margin-top:60px;
  width: 100%;
  background: #00a1cb;
  margin-bottom: 70px;
  padding:80px 0 100px;
  font-size:50px;
  text-align:center;
  color:#fff;
  position: relative;
  p{
    font-size:16px;
    color:#eee;
    text-align: center;
  }
  .header-btn{
    position: absolute;
    width:120px;
    height:120px;
    padding:10px;
    bottom:-60px;
    left:50%;
    margin-left: -60px;
    background:rgba(255, 255, 255, 0.7);
    border-radius: 140px;
    a{
      width:120px;
      height:120px;
      border-radius: 120px;
      font-size:16px;
      line-height:120px;
      text-align: center;
      color:#fff;
      display:block;
      background: #e54028;
      .transition(all 0.2s ease-in-out);
      box-shadow:1px 1px 1px #CF311A;
      &:hover{
        background:#e8543f;
      }
    }
  }
  span{
    font-size:18px;
  }
}
.header-logo{display: inline-block;height:60px;line-height: 60px;color:#fff;background: #fa9915;text-align: center;font-size: 26px;padding:0 15px;}

.main{
  background: #fff;
  width:1160px;
  margin:0 auto;
  overflow: hidden;
  padding:0 20px 15px;
  .fadeIn(0;100px;fadeInA);
  .animation(fadeInA .8s 0s ease-in-out both);
  h3{
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    border-left: 5px solid #00a1cb;
    background: #f2f2f2;
    padding-left: 20px;
    margin: 30px 0;
    font-weight:normal;
    color:#666;
  }
  h2{
    font-size:20px;
    color: #00a1cb;
    border-bottom:1px solid #e9e9e9;
    padding-bottom: 15px;
    margin-top:30px;
  }
  h4{
    font-size:18px;
    margin:20px 10px 10px;
  }
  p{
    line-height:24px;
    font-size:16px;
    margin:10px;
    .s_icon{
      font-size:16px;
      font-weight:bold;
    }
    &.cankao{
      color:#999;
      font-size:14px;
      margin-top:20px;
    }
    &.p-tips{
      color:#999;
      font-size:14px;
      margin-top:20px;
    }
  }
}
.m-dl{
  font-size:14px;
  line-height:20px;
  margin-left: 10px;
  border-left:3px solid #ddd;
  background:rgba(102,128,153,.05);
  padding:10px;
  dd{
    margin-left: 15px;
    color:#555;
  }
}
.show-box{
  width: 750px;
  height: 250px;
  margin: 0 auto;
  border: 1px dashed #fff;
}
.show-demo{
  width: 500px;
  height: 200px;
  margin: 25px auto 0;
  background: #fa9915;
  border-radius: 10px;
}
.btn{
  padding-left: 30px;
  a{
    display: inline-block;
    width: 100px;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    background: #fa9915;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    .transition(all 0.3s ease-out);
    &:hover{
      background: #F9915C;
    }
  }
}
.code{
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  background: #23241f;
  padding:10px;
  border-radius:5px;
  .code-css{
    width: 48%;
    float: left;
    border-right:1px dashed #eee;
    padding-right:15px;
  }
  .code-less{
    width: 48%;
    float: right;
    padding-left: 10px;
  }
  code{
    // padding:10px;
    word-break:break-all;
    white-space:pre-wrap;
    font-family:"Consolas";
  }
}
.select{
  text-align:center;
  padding-top:30px;
  .selectname{
    display:inline-block;
    width:140px;
    height:20px;
    padding:13px 0 14px;
    text-align: center;
    border:1px dashed #ccc;
    background: #fff;
    font-size:16px;
    color:#aaa;
    margin-right:10px;
    border-radius:5px;
    vertical-align:top;
  }
  select{
    border-radius:4px;
    border:1px solid #c0c8c9;
    padding:14px 15px;
    vertical-align:top;
    font-size:16px;
  }
  .select-btn{
    width:120px;
    height:49px;
    margin-left: 10px;
    vertical-align:top;
    border-radius:4px;
    background:#e54028;
    text-align:center;
    line-height:45px;
    color:#fff;
    font-size:16px;
    display:inline-block;
    .transition(all 0.2s ease-in-out);
    &:hover{
      background:#e8543f;
    }
  }
  optgroup{
    background:#f2f2f2;
  }
}
.name-table{
  font-size:16px;
  border-left:1px solid #ccc;
  border-bottom:1px solid #ccc;
  tr{
    height:35px;
    th{
      text-align: center;
      border-top:1px solid #ccc;
      border-right:1px solid #ccc;
    }
    td{
      border-top:1px solid #ccc;
      border-right:1px solid #ccc;
      padding:0 10px;
      font-size:14px;
      color:#999;
      &.td3{
        text-align: center;
      }
      &:first-child{
        color:#333;
      }
    }
  }
}
.footer{text-align: center;color:#ccc;height:40px;line-height: 40px;margin-top: 20px;font-size:14px;}
.footer a{color:#bbb;}
.footer a:hover{color:#f60;}
.spanclass{display: none;}

.bounce{
  .bounce();
  .animation(bounce 1s ease-in-out);
}
.flash{
  .flash();
  .animation(flash 1s ease-in-out);
}
.pulse{
  .pulse();
  .animation(pulse 1s ease-in-out);
}

.rubberBand{
  .rubberBand();
  .animation(rubberBand 1s ease-in-out);
}
.shake{
  .shake();
  .animation(shake 1s ease-in-out);
}
.swing{
  .swing();
  .animation(swing 1s ease-in-out);
}
.tada{
  .tada();
  .animation(tada 1s ease-in-out);
}

//Wobbles
.wobble{
  .wobble();
  .animation(wobble 1s ease-in-out);
}
.wobbleTop{
  .wobbleTop();
  .animation(wobbleTop 1s ease-in-out);
}
.wobbleBottom{
  .wobbleBottom();
  .animation(wobbleBottom 1s ease-in-out);
}
.wobbleSkew{
  .wobbleSkew();
  .animation(wobbleSkew 1s ease-in-out);
}
//bounce
.bounceIn{
  .bounceIn();
  .animation(bounceIn 1s ease-in-out);
}
.bounceInDown{
  .bounceInDown();
  .animation(bounceInDown 1s ease-in-out);
}
.bounceInLeft{
  .bounceInLeft();
  .animation(bounceInLeft 1s ease-in-out);
}
.bounceInRight{
  .bounceInRight();
  .animation(bounceInRight 1s ease-in-out);
}
.bounceInUp{
  .bounceInUp();
  .animation(bounceInUp 1s ease-in-out);
}
.bounceOut{
  .bounceOut();
  .animation(bounceOut 1s ease-in-out);
}
.bounceOutDown{
  .bounceOutDown();
  .animation(bounceOutDown 1s ease-in-out);
}
.bounceOutLeft{
  .bounceOutLeft();
  .animation(bounceOutLeft 1s ease-in-out);
}
.bounceOutRight{
  .bounceOutRight();
  .animation(bounceOutRight 1s ease-in-out);
}
.bounceOutUp{
  .bounceOutUp();
  .animation(bounceOutUp 1s ease-in-out);
}
.fadeIn{
  .fadeIn();
  .animation(fadeIn 1s ease-in-out);
}
.fadeInDown{
  .fadeInDown();
  .animation(fadeInDown 1s ease-in-out);
}
.fadeInDownBig{
  .fadeInDownBig();
  .animation(fadeInDownBig 1s ease-in-out);
}
.fadeInLeft{
  .fadeInLeft();
  .animation(fadeInLeft 1s ease-in-out);
}
.fadeInLeftBig{
  .fadeInLeftBig();
  .animation(fadeInLeftBig 1s ease-in-out);
}
.fadeInRight{
  .fadeInRight();
  .animation(fadeInRight 1s ease-in-out);
}
.fadeInRightBig{
  .fadeInRightBig();
  .animation(fadeInRightBig 1s ease-in-out);
}
.fadeInUp{
  .fadeInUp();
  .animation(fadeInUp 1s ease-in-out);
}
.fadeInUpBig{
  .fadeInUpBig();
  .animation(fadeInUpBig 1s ease-in-out);
}
.fadeOut{
  .fadeOut();
  .animation(fadeOut 1s ease-in-out);
}
.fadeOutDown{
  .fadeOutDown();
  .animation(fadeOutDown 1s ease-in-out);
}
.fadeOutDownBig{
  .fadeOutDownBig();
  .animation(fadeOutDownBig 1s ease-in-out);
}
.fadeOutLeft{
  .fadeOutLeft();
  .animation(fadeOutLeft 1s ease-in-out);
}
.fadeOutLeftBig{
  .fadeOutLeftBig();
  .animation(fadeOutLeftBig 1s ease-in-out);
}
.fadeOutRight{
  .fadeOutRight();
  .animation(fadeOutRight 1s ease-in-out);
}
.fadeOutRightBig{
  .fadeOutRightBig();
  .animation(fadeOutRightBig 1s ease-in-out);
}
.fadeOutUp{
  .fadeOutUp();
  .animation(fadeOutUp 1s ease-in-out);
}
.fadeOutUpBig{
  .fadeOutUpBig();
  .animation(fadeOutUpBig 1s ease-in-out);
}
// flip
.flip{
  .flip();
  .animation(flip 1s ease-in-out);
}
.flipInX{
  .flipInX();
  .animation(flipInX 1s ease-in-out);
}
.flipInY{
  .flipInY();
  .animation(flipInY 1s ease-in-out);
}
.flipOutX{
  .flipOutX();
  .animation(flipOutX 1s ease-in-out);
}
.flipOutY{
  .flipOutY();
  .animation(flipOutY 1s ease-in-out);
}
//Scales
.scaleIn{
  .scaleIn();
  .animation(scaleIn 1s ease-in-out);
}
.scaleInX{
  .scaleInX();
  .animation(scaleInX 1s ease-in-out);
}
.scaleInY{
  .scaleInY();
  .animation(scaleInY 1s ease-in-out);
}
.scaleOut{
  .scaleOutX();
  .animation(scaleOut 1s ease-in-out);
}
.scaleOutX{
  .scaleOutX();
  .animation(scaleOutX 1s ease-in-out);
}
.scaleOutY{
  .scaleOutY();
  .animation(scaleOutY 1s ease-in-out);
}

.lightSpeedInLeft{
  .lightSpeedInLeft();
  .animation(lightSpeedInLeft 1s ease-in-out);
}
.lightSpeedInRight{
  .lightSpeedInRight();
  .animation(lightSpeedInRight 1s ease-in-out);
}
.lightSpeedOutLeft{
  .lightSpeedOutLeft();
  .animation(lightSpeedOutLeft 1s ease-in-out);
}
.lightSpeedOutRight{
  .lightSpeedOutRight();
  .animation(lightSpeedOutRight 1s ease-in-out);
}

.rotateIn{
  .rotateIn();
  .animation(rotateIn 1s ease-in-out);
}
.rotateInDownLeft{
  .rotateInDownLeft();
  .animation(rotateInDownLeft 1s ease-in-out);
}
.rotateInDownRight{
  .rotateInDownRight();
  .animation(rotateInDownRight 1s ease-in-out);
}
.rotateInUpLeft{
  .rotateInUpLeft();
  .animation(rotateInUpLeft 1s ease-in-out);
}
.rotateInUpRight{
  .rotateInUpRight();
  .animation(rotateInUpRight 1s ease-in-out);
}
.rotateOut{
  .rotateOut();
  .animation(rotateOut 1s ease-in-out);
}
.rotateOutDownLeft{
  .rotateOutDownLeft();
  .animation(rotateOutDownLeft 1s ease-in-out);
}
.rotateOutDownRight{
  .rotateOutDownRight();
  .animation(rotateOutDownRight 1s ease-in-out);
}
.rotateOutUpLeft{
  .rotateOutUpLeft();
  .animation(rotateOutUpLeft 1s ease-in-out);
}
.rotateOutUpRight{
  .rotateOutUpRight();
  .animation(rotateOutUpRight 1s ease-in-out);
}

.hingeLeft{
  .hingeLeft();
  .animation(hingeLeft 1s ease-in-out);
}
.hingeRight{
  .hingeRight();
  .animation(hingeRight 1s ease-in-out);
}
.rollInLeft{
  .rollInLeft();
  .animation(rollInLeft 1s ease-in-out);
}
.rollInRight{
  .rollInRight();
  .animation(rollInRight 1s ease-in-out);
}
.rollOutLeft{
  .rollOutLeft();
  .animation(rollOutLeft 1s ease-in-out);
}
.rollOutRight{
  .rollOutRight();
  .animation(rollOutRight 1s ease-in-out);
}
.zoomIn{
  .zoomIn();
  .animation(zoomIn 1s ease-in-out);
}
.zoomInDown{
  .zoomInDown();
  .animation(zoomInDown 1s ease-in-out);
}

.zoomInLeft{
  .zoomInLeft();
  .animation(zoomInLeft 1s ease-in-out);
}
.zoomInRight{
  .zoomInRight();
  .animation(zoomInRight 1s ease-in-out);
}
.zoomInUp{
  .zoomInUp();
  .animation(zoomInUp 1s ease-in-out);
}
.zoomOut{
  .zoomOut();
  .animation(zoomOut 1s ease-in-out);
}
.zoomOutDown{
  .zoomOutDown();
  .animation(zoomOutDown 1s ease-in-out);
}
.zoomOutLeft{
  .zoomOutLeft();
  .animation(zoomOutLeft 1s ease-in-out);
}
.zoomOutRight{
  .zoomOutRight();
  .animation(zoomOutRight 1s ease-in-out);
}
.zoomOutUp{
  .zoomOutUp();
  .animation(zoomOutUp 1s ease-in-out);
}
.turnInDown{
  .turnInDown();
  .animation(turnInDown 1s ease-in-out);
}
.turnInLeft{
  .turnInLeft();
  .animation(turnInLeft 1s ease-in-out);
}
.turnInRight{
  .turnInRight();
  .animation(turnInRight 1s ease-in-out);
}
.turnInUp{
  .turnInUp();
  .animation(turnInUp 1s ease-in-out);
}
.turnOutDown{
  .turnOutDown();
  .animation(turnOutDown 1s ease-in-out);
}
.turnOutLeft{
  .turnOutLeft();
  .animation(turnOutLeft 1s ease-in-out);
}
.turnOutRight{
  .turnOutRight();
  .animation(turnOutRight 1s ease-in-out);
}
.turnOutUp{
  .turnOutUp();
  .animation(turnOutUp 1s ease-in-out);
}
